CSS Subgrid: Iegulto izkārtojumu jaudas atraisīšana

CSS Grid ir radījis revolūciju tīmekļa izkārtojumā, piedāvājot nepārspējamu elastību un kontroli. Tomēr iegulto režģu pārvaldība dažkārt var kļūt apgrūtinoša. Tieši šeit palīgā nāk CSS Subgrid. Subgrid ļauj režģa elementam pārmantot sava vecākā režģa celiņu izmērus, vienkāršojot sarežģītus izkārtojumus un padarot jūsu kodu vieglāk uzturamu. Šis raksts sniedz visaptverošu ceļvedi CSS Subgrid izpratnei un ieviešanai, papildināts ar praktiskiem piemēriem un ieskatiem visu līmeņu izstrādātājiem.

Kas ir CSS Subgrid?

Subgrid ir CSS Grid funkcija, kas ļauj režģa elementam pašam kļūt par režģi, pārmantojot tā vecāka režģī definētos rindu un kolonnu celiņus. Tas nozīmē, ka varat līdzināt saturu vairākos iegultos režģos, katrā iegultajā režģī skaidri nedefinējot celiņu izmērus. Uzskatiet to par veidu, kā paplašināt vecākā režģa struktūru tā bērnos, radot vienotāku un konsekventāku izkārtojumu.

Kāpēc izmantot Subgrid?

Vienkāršoti izkārtojumi: Subgrid samazina iegulto režģu sarežģītību, padarot jūsu CSS kodu tīrāku un vieglāk saprotamu.
Konsekventa līdzināšana: Viegli līdziniet saturu vairākos ligzdošanas līmeņos, nodrošinot vizuāli pievilcīgu un profesionālu dizainu.
Uzlabota uzturamība: Izmaiņas vecākā režģī automātiski tiek pārnestas uz apakšrežģiem, samazinot nepieciešamību veikt manuālas korekcijas vairākās vietās.
Uzlabota responsivitāte: Subgrid nevainojami darbojas ar responsīvā dizaina principiem, pielāgojot izkārtojumus dažādiem ekrāna izmēriem, neradot izkārtojuma pārrāvumus.

Pārlūkprogrammu saderība

Pirms ķerties pie implementācijas, ir svarīgi pārbaudīt pārlūkprogrammu saderību. No 2023. gada beigām Subgrid ir labs atbalsts modernajās pārlūkprogrammās, tostarp Chrome, Firefox, Safari un Edge. Tomēr vienmēr ir laba prakse izmantot Can I use, lai pārbaudītu jaunāko atbalsta statusu.

Subgrid pamata implementācija

Sāksim ar vienkāršu piemēru, lai ilustrētu Subgrid pamatkoncepcijas.

HTML struktūra

Vispirms definējam pamata HTML struktūru mūsu režģim.


<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS stili

Tagad definēsim CSS, lai izveidotu vecāko režģi un apakšrežģi .content elementā.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Define placement of items inside the .content subgrid */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

Šajā piemērā .content elements ir definēts kā apakšrežģis. Īpašības grid-template-columns: subgrid; un grid-template-rows: subgrid; norāda apakšrežģim pārmantot celiņu izmērus no vecākā režģa. Satura apgabals tagad atbilst galvenā konteinera režģī definētajiem celiņu izmēriem, bez nepieciešamības pēc jebkādiem skaidriem iestatījumiem pašam apakšrežģim. Tas nodrošina perfektu līdzināšanu starp sānjoslu un elementiem satura apgabalā.

Progresīvas Subgrid tehnikas

Celiņu pārklāšana

Subgrid arī ļauj elementiem apakšrežģī pārklāt vairākus celiņus, tāpat kā parastā režģī. Tas nodrošina vēl lielāku elastību sarežģītu izkārtojumu veidošanā.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Šis kods liks .item-1 pārklāt pirmās divas apakšrežģa kolonnas.

Nosauktas režģa līnijas

Jūs varat izmantot nosauktas režģa līnijas ar Subgrid, lai iegūtu vēl lielāku skaidrību un kontroli. Pieņemsim, ka jūsu vecākā režģī ir nosauktas līnijas:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

Pēc tam jūs varat atsaukties uz šīm nosauktajām līnijām savā apakšrežģī:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

Netiešo celiņu apstrāde

Ja režģa elementu skaits pārsniedz definēto celiņu skaitu vecākā režģī, Subgrid izveidos netiešos celiņus. Jūs varat kontrolēt šo netiešo celiņu izmēru, izmantojot grid-auto-rows un grid-auto-columns īpašības, līdzīgi kā parastajā CSS Grid.

Praktiski piemēri un lietošanas gadījumi

Izpētīsim dažus praktiskus piemērus, kā Subgrid var izmantot, lai izveidotu sarežģītus izkārtojumus.

Sarežģīts produktu saraksts

Iedomājieties produktu sarakstu, kurā vēlaties konsekventi un līdzināti attēlot vairākas produktu detaļas (attēlu, nosaukumu, aprakstu, cenu). Subgrid var palīdzēt to viegli sasniegt.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Produkts 1">
    <h3>Produkta nosaukums 1</h3>
    <p>Produkta 1 apraksts.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Produkts 2">
    <h3>Produkta nosaukums 2</h3>
    <p>Produkta 2 apraksts.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

Šajā piemērā .product elementi izmanto Subgrid, lai konsekventi līdzinātu attēlu, nosaukumu, aprakstu un cenu visiem produktiem, pat ja to satura garums atšķiras. Tas nodrošina tīru un profesionālu prezentāciju.

Žurnāla izkārtojums

Žurnāla stila izkārtojumu veidošana ar dažādiem satura blokiem var būt izaicinājums. Subgrid vienkāršo šo procesu, ļaujot jums līdzināt elementus dažādās izkārtojuma sadaļās.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Galvenā raksta virsraksts</h2>
    <p>Galvenā raksta saturs...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sānjoslas raksta virsraksts</h3>
    <p>Sānjoslas raksta saturs...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Izcelts attēls">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

Šajā piemērā galvenais raksts, sānjoslas raksts un izceltais attēls visi dala vienu un to pašu režģa struktūru, nodrošinot konsekventu virsrakstu un satura līdzināšanu dažādās sadaļās. Subgrid izmantošana vienkāršo CSS un padara izkārtojumu vieglāk uzturamu.

Formu izkārtojumi

Sarežģītu formu izkārtojumu veidošana ar līdzinātām etiķetēm un ievades laukiem var būt sarežģīta. Subgrid nodrošina vienkāršu risinājumu.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Vārds:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">E-pasts:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Ziņa:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Define track sizes in the parent grid */
    gap: 10px;
}

Šeit .form-row elementi izmanto Subgrid, lai konsekventi līdzinātu etiķetes un ievades laukus visās rindās. Celiņu izmēri ir definēti vecākā režģī (.form-grid), nodrošinot vienotu izskatu.

Labākā prakse un apsvērumi

Sāciet ar stabilu režģa pamatu: Pirms Subgrid ieviešanas pārliecinieties, ka jūsu vecākais režģis ir labi definēts un responsīvs.
Izmantojiet nosauktas režģa līnijas: Nosauktas režģa līnijas uzlabo lasāmību un uzturamību, īpaši sarežģītos izkārtojumos.
Rūpīgi testējiet: Pārbaudiet savus Subgrid izkārtojumus dažādās pārlūkprogrammās un ierīcēs, lai nodrošinātu konsekventu attēlošanu.
Apsveriet pieejamību: Nodrošiniet, lai jūsu Subgrid izkārtojumi būtu pieejami lietotājiem ar invaliditāti, izmantojot semantisku HTML un nodrošinot atbilstošus ARIA atribūtus.
Nepārmērīgi neizmantojiet Subgrid: Lai gan Subgrid ir spēcīgs, tas ne vienmēr ir labākais risinājums. Apsveriet vienkāršākas alternatīvas, piemēram, Flexbox vai parasto Grid, mazāk sarežģītiem izkārtojumiem.

Subgrid pret parasto CSS Grid

Lai gan gan Subgrid, gan CSS Grid ir spēcīgi izkārtojuma rīki, tiem ir dažādi mērķi. Parastais CSS Grid ir ideāli piemērots vispārēju lapu izkārtojumu veidošanai un satura pamatstruktūras definēšanai. No otras puses, Subgrid ir vislabāk piemērots iegulto izkārtojumu pārvaldībai un satura līdzināšanai vairākos ligzdošanas līmeņos. Uzskatiet Subgrid par CSS Grid paplašinājumu, kas vienkāršo sarežģītus izkārtojuma scenārijus.

Biežāko problēmu risināšana

Subgrid nedarbojas: Vēlreiz pārbaudiet pārlūkprogrammas saderību un pārliecinieties, ka esat aktivizējis Subgrid, iestatot grid-template-columns: subgrid; un/vai grid-template-rows: subgrid; apakšrežģa elementam.
Līdzināšanas problēmas: Pārbaudiet, vai celiņu izmēri jūsu vecākā režģī ir pareizi definēti un vai apakšrežģa elementi ir pareizi novietoti, izmantojot grid-column un grid-row.
Negaidīti izkārtojuma pārrāvumi: Pārbaudiet savu izkārtojumu dažādos ekrāna izmēros, lai identificētu un novērstu jebkādas responsīvā dizaina problēmas.

Noslēgums

CSS Subgrid ir vērtīgs papildinājums CSS Grid rīku komplektam, piedāvājot spēcīgu veidu, kā pārvaldīt sarežģītus iegultos izkārtojumus un izveidot vizuāli pievilcīgus, uzturamus un responsīvus tīmekļa dizainus. Izprotot pamatkoncepcijas un izpētot praktiskus piemērus, jūs varat izmantot Subgrid, lai izveidotu sarežģītus izkārtojumus, kurus iepriekš bija grūti vai neiespējami sasniegt ar tradicionālajām CSS tehnikām. Pieņemiet Subgrid un atklājiet jaunas iespējas savos tīmekļa izstrādes projektos. Subgrid ļauj jums patiesi paplašināt CSS režģa jaudu iegultos elementos, nodrošinot lielāku kontroli un koda uzturamību. Eksperimentējiet ar to un izpētiet priekšrocības, ko sniedz sarežģītu CSS izkārtojumu vienkāršošana.

MLOG